<template>
  <el-container>
    <el-header style="margin-bottom: 50px">
      <h2>新增账号管理</h2>
      <el-radio-group v-model="activeForm">
        <el-radio-button label="admin">新增管理员</el-radio-button>
        <el-radio-button label="user">新增普通用户</el-radio-button>
      </el-radio-group>
    </el-header>

    <el-main>
      <el-form
          v-if="activeForm === 'admin'"
          :model="adminForm"
          :rules="adminRules"
          ref="adminFormRef"
          label-width="120px"
      >
        <el-form-item label="用户名" prop="userName">
          <el-input v-model="adminForm.userName" placeholder="请输入用户名" clearable />
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="adminForm.phone" placeholder="请输入手机号" clearable />
        </el-form-item>
        <el-form-item label="密码" prop="passWord">
          <el-input v-model="adminForm.passWord" type="password" placeholder="请输入密码" clearable />
        </el-form-item>
        <el-button type="primary" @click="addAdmin">提交</el-button>
      </el-form>

      <el-form
          v-else
          :model="userForm"
          :rules="userRules"
          ref="userFormRef"
          label-width="120px"
      >
        <el-form-item label="用户名" prop="userName">
          <el-input v-model="userForm.userName" placeholder="请输入用户名" clearable />
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="userForm.phone" placeholder="请输入手机号" clearable />
        </el-form-item>
        <el-form-item label="密码" prop="passWord">
          <el-input v-model="userForm.passWord" type="password" placeholder="请输入密码" clearable />
        </el-form-item>
        <el-form-item label="学号或工号" prop="userCard">
          <el-input v-model="userForm.userCard" placeholder="请输入学号或工号" clearable />
        </el-form-item>
        <el-form-item label="新增人员标识" prop="mark">
          <el-select v-model="userForm.mark" placeholder="请选择标识">
            <el-option label="学生" value="1" />
            <el-option label="商家" value="2" />
            <el-option label="维修员" value="4" />
          </el-select>
        </el-form-item>
        <el-form-item label="区域选择" prop="areaCodeId">
          <el-select v-model="userForm.areaCodeId" placeholder="请选择区域">
            <el-option
                v-for="area in areaList"
                :key="area.areaCodeId"
                :label="area.areaCodeName"
                :value="area.areaCodeId"
            />
          </el-select>
        </el-form-item>
        <el-button type="primary" @click="addUser">提交</el-button>
      </el-form>
    </el-main>
  </el-container>
</template>

<script>
import { ref, reactive, onMounted } from "vue";
import axios from "axios";

export default {
  setup() {
    const activeForm = ref("admin");

    // 管理员表单数据
    const adminForm = reactive({
      userName: "",
      phone: "",
      passWord: "",
    });

    // 普通用户表单数据
    const userForm = reactive({
      userName: "",
      phone: "",
      passWord: "",
      userCard: "",
      mark: "",
      areaCodeId: null,
    });

    // 区域列表数据
    const areaList = ref([]);

    // 表单验证规则
    const adminRules = {
      userName: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
      phone: [
        { required: true, message: "手机号不能为空", trigger: "blur" },
        {
          pattern: /^1[3-9]\d{9}$/,
          message: "手机号格式不正确",
          trigger: "blur",
        },
      ],
      passWord: [{ required: true, message: "密码不能为空", trigger: "blur" }],
    };

    const userRules = {
      ...adminRules,
      userCard: [
        { required: true, message: "学号或工号不能为空", trigger: "blur" },
        {
          min: 8,
          max: 10,
          message: "学号或工号长度在8-10位之间",
          trigger: "blur",
        },
      ],
      mark: [{ required: true, message: "请选择新增人员标识", trigger: "change" }],
      areaCodeId: [{ required: true, message: "请选择区域", trigger: "change" }],
    };

    // 表单引用
    const adminFormRef = ref(null);
    const userFormRef = ref(null);

    // 加载区域列表
    const loadAreas = async () => {
      try {
        const response = await axios.get("/user/areaCode/listAreaCode");
        areaList.value = response.data.data;
      } catch (error) {
        console.error("加载区域列表失败", error);
      }
    };

    // 提交管理员数据
    const addAdmin = async () => {
      adminFormRef.value.validate(async (valid) => {
        if (valid) {
          try {
            await axios.post("/user/admin/insertAdmin", adminForm).then(resp=>{
              if(resp.data.code==200){
                alert("新增账号成功");
              }else {
                alert(resp.data.msg)
              }
            });
            alert("新增管理员成功");
          } catch (error) {
            console.error("新增管理员失败", error);
          }
        }
      });
    };

    // 提交用户数据
    const addUser = async () => {
      userFormRef.value.validate(async (valid) => {
        if (valid) {

            await axios.post("/user/admin/insertUser.api", userForm).then(resp=>{
              if(resp.data.code==200){
                alert("新增账号成功");
              }else {
                alert(resp.data.msg)
              }

            });


        }
      });
    };

    onMounted(() => {
      loadAreas();
    });

    return {
      activeForm,
      adminForm,
      userForm,
      areaList,
      adminRules,
      userRules,
      adminFormRef,
      userFormRef,
      addAdmin,
      addUser,
    };
  },
};
</script>

<style scoped>
el-header {
  background-color: #409eff;
  color: white;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
